<template>
	<view>
		<u-popup ref="popup" mode="bottom">
			<view :class="istab ? 'wrapper istab' : 'wrapper' ">
				<view class="popTitle">
					{{ title }}
					<image @click="close()" class="titleIcon" src="@/static/img/close_ico.png"></image>
				</view>
				<view class="joblist">
					<scroll-view scroll-y="true" style="height: 100%;">
						<view class="item" v-for="(item,index) in joblist" :key="item.id" @click="selectJob(item)">
							<view :class="item.id == currentId ? 'text substring ac' : 'text substring'">
								{{item.jobname}} {{item.wage_text}}
							</view>
							<u-icon name="checkbox-mark" v-if="currentId == item.id" color="#1787fb"></u-icon>
							<!-- <uni-icons v-if="currentId == item.id" type="checkmarkempty"></uni-icons> -->
						</view>
					</scroll-view>
				</view>
				<view class="btns btnShadow">
					<view class="btn" @click="submit" v-if="type == 'changejob'"> 
						确定
					</view>
					<view class="btn" @click="submit2" v-if="type == 'selectjob'">
						确定
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import http from '@/utils/http'
	import api from '@/api'
	// import { imJoblist, changeJob } from "@/utils/api.js"
	import { mapState } from "vuex"
	export default {
		name: "jobDialog",
		props: {
			title: {
				type: String,
				default: '选择沟通职位'
			},
			companyId: {
				type: [Number, String],
				default: '0'
			},
			type: {
				type: String,
				default: 'changejob'
			},
			istab: { 
				type: Boolean,
				default: true
			},
			jobId:{
				type: [Number, String],
				default: 0
			}
		},
		data() {
			return {
				// 职位列表
				joblist: [],
				// 当前职位id
				currentId: 0,
				// 当前点击项数据
				currentItem: {}
			}
		},
		watch: {
			jobId: {
				handler(val) {
					if(val > 0){
						this.currentId = val
					}
				},
				immediate: true,
				deep: true
			}
		},
		computed: {
			...mapState(['imToken', 'chatId'])
		},
		methods: {
			// 弹窗开启
			open() {
				this.$refs.popup.open();
			},
			// 弹窗关闭
			close() {
				this.$refs.popup.close();
			},
			// 获取职位列表
			getJobList() {
				http.get(api.job_list,{
					company_id: this.companyId,
				}).then(res => {
					if (res.data.code == 200) {
						let {
							items
						} = res.data.data
						this.joblist = items
						this.joblist.forEach((item,index)=>{
							if(item.id == this.currentId){
								this.currentItem = item
							}
						})
						this.open()
					}
				})
			},
			// 职位点击 
			selectJob(item) {
				this.currentItem = item
				this.currentId = item.id
			},
			// 切换职位
			submit() {
				this.close()
				if(this.jobId != this.currentId){
					http.post(api.change_job,{
						token: this.imToken,
						jobid: this.currentId,
						chat_id: this.chatId
					}).then(res => {
						if (res.data.code == 200) {
							this.$emit('handleChangeJob', this.currentItem)
							this.currentId = 0
						}
					})
				} else {
					uni.showToast({
						title:'您当前正在沟通此职位',
						icon:'none'
					})
				}
			},
			// 沟通职位
			submit2(){
				this.close()
				if(this.currentId > 0){
					this.$emit('handleChangeJob', this.currentItem)
				} else {
					uni.showToast({
						title:'请选择沟通职位',
						icon:'none'
					})
				}
				
			}
		},
	}
</script>
<style scoped lang="scss">
	.wrapper {
		position: relative;
		box-sizing: border-box;

		&.istab {
			margin-bottom: 116rpx;
		}

		.popTitle {
			font-size: 31rpx;
			color: #333;
			width: 100%;
			box-sizing: border-box;
			padding: 30rpx 36rpx;
			background: #fff;
			font-size: 31rpx;
			font-weight: bold;
			position: relative;
			border-radius: 30rpx 30rpx 0 0;

			.titleIcon {
				display: inline-block;
				width: 23rpx;
				height: 23rpx;
				position: absolute;
				top: 36rpx;
				right: 36rpx;
			}
		}

		.joblist {
			background: #fff;
			padding: 0 36rpx 138rpx;
			height: 740rpx;
			background: #fff;
			box-sizing: border-box;
			.item {
				padding: 30rpx 0;
				border-bottom: 1rpx solid #ededed;
				display: flex;
				justify-content: space-between;

				.text {
					flex-shrink: 0;
					width: 568rpx;
					color: #333;
					font-size: 28rpx;

					&.ac {
						color: #1787fb;
					}
				}
			}
		}

		.btns {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0rpx;
			padding: 30rpx 0;
			background: #fff;

			.btn {
				width: 670rpx;
				height: 81rpx;
				background:#1787fb;
				border-radius: 6rpx;
				text-align: center;
				font-size: 28rpx;
				line-height: 81rpx;
				color: #fff;
				margin: 0 auto;
			}
		}
	}
</style>
